/* eslint-disable react-hooks/exhaustive-deps */
import React from 'react'
import styles from './index.less'
import ProForm, { ProFormSelect } from '@ant-design/pro-form';
import ProList from '@ant-design/pro-list';
import { Row } from 'antd';
import { getCourseRecord } from '@/services/student';
import moment from 'moment';
import { useState } from 'react';
import { useContext } from 'react';
import { CourseContext } from '..';
import { duanOption } from '../Record';
// import { useEffect } from 'react';

export default function CourseRecord() {
  const [duan, setDuan] = useState();
  const [type, setCourseType] = useState();
  const ctx = useContext(CourseContext);
  const getRecords = async (params?: any) => {
    const res = await getCourseRecord({ ...params })
    return {
      data: res.result.records,
      total: res.result.total,
    }
  }
  // useEffect(() => {
  //   getRecords();
  // }, [duan, type])
  const courseStatus = (s?: string) => {
    if (s == '0') {
      return '未开始'
    } else if (s == '1') {
      return '已开始'
    } else if (s == '2') {
      return '已完成'
    } else {
      return '已删除'
    }
  }
  const courseType = (t?: string) => {
    if (t == '1') {
      return '长期课'
    } else if (t == '2') {
      return '公开课'
    } else if (t == '3') {
      return '体验课'
    } else if (t == '4') {
      return '录像启蒙课'
    } else {
      return '录像启蒙课(体验)'
    }
  }

  return (
    <div className={styles.course_wrap}>
      <div className={styles.right_pro_form_style}>
        <ProForm
          layout="horizontal"
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 17 }}
          colon={true}
          labelAlign='right'
        >
          <ProFormSelect
            colProps={{ xl: 8, md: 12 }}
            label="爱棋道段位"
            name="require"
            initialValue="0"
            fieldProps={{
              onChange: (val) => setDuan(val == 0 ? undefined : val),
              allowClear: false

            }}
            valueEnum={{
              0: "全部",
              8: "旧版i-0",
              9: "启蒙零基础",
              10: "启蒙进阶突破",
              11: "i-1",
              12: "i-2",
              13: "i-3",
              14: "i-4",
              150: "i-5",
              160: "i-6",
              170: "i-7",
              180: "i-8",
              190: "i-9",
              200: "i-10",
              210: "i-11",
              220: "i-12"
            }}
          />
          <ProFormSelect
            colProps={{ xl: 8, md: 12 }}
            label="课程类型："
            name="required"
            initialValue="0"
            fieldProps={{
              onChange: (val) => setCourseType(val == 0 ? undefined : val),
              allowClear: false

            }}
            valueEnum={{
              0: "全部",
              1: "长期课",
              2: "公开课",
              3: "体验课",
              4: "录像启蒙课",
              5: "录像启蒙课-体验",
            }}
          />
        </ProForm>
      </div>
      <ProList
        className={styles.pro_list}
        itemLayout="vertical"
        pagination={{
          defaultPageSize: 4,
          hideOnSinglePage: true,
          simple: true,
        }}
        rowKey="id"
        params={{
          duan: duan,
          type: type,
          uid: ctx.uid,
        }}
        request={async (params) => {
          (params as any).currentPage = params.current
          delete (params.current)
          return getRecords(params)
        }}
        renderItem={(item) => (
          <div className={styles.course_item}>
            <Row justify="space-between" style={{ flexWrap: 'nowrap' }} align="middle">
              <div style={{ fontSize: '18px', fontWeight: 'bold', marginLeft: '-10px' }}>
                【{courseStatus(item.activityStatus)}】
                {item.activityName}</div>
              <div className={styles.tips_style}>{duanOption(item.duan)}-{courseType(item.type)}</div>
            </Row>
            <Row justify="space-between" align="middle">
              <div>课程ID：{item.activityId}</div>
              <div className={styles.status_style}>{
                item.status == 0 ? '正常' : item.status == 1 ? '退费' : item.status == 2 ? '延期' : '申请退费'
              }</div>
            </Row>
            <div>
              课程周期：{moment(item.startTime).format('yyyy.MM.DD HH:mm')} 至 {moment(item.endTime).format('yyyy.MM.DD HH:mm')}
            </div>
            <Row>
              <div>
                主讲：{item.mainTeacherName || '-'}
              </div>
              <div style={{ marginLeft: "15px" }}>辅导：{item.assistantTeacherName || '-'}</div>
            </Row>
          </div>
        )}

      />
    </div>
  )
}
